<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ethan and Jayden</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/events.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>

<script>

$(document).ready(function () {

    $.ajax({
        type:       "GET",
        url:        "xml/events.xml",
        dataType:   "xml",
        success:    function(xml) {
            readXML(xml);
        }
    });

});

function readXML(xml) {
	
	var html = "";
	
	$(xml).find("event").each(function() {  // for every event
		var orientation = $(this).find("orientation").text();
		if( orientation == 'landscape') {
			var image = $(this).find("image").text();
			html += "<div class=\"title\">"+$(this).find("name").text()+"</div>";
			html += "<div class=\"landscape\">";
			if( image == 'youtube')
				html += "<iframe width='500' height='315' src=\""+$(this).find("link").text()+"\" frameborder='0'></iframe>";
			else
			    html += "<img class=\"dropShadow\" width=\"500px\" src=\""+$(this).find("image").text()+"\"/></div>";
			html += "<div class=\"event_description bottom\"><b>"+$(this).find("date").text()+"</b> - "+$(this).find("description").text()+"</div>";
			if( $(this).find("html").text() != "" ) {
				html += "<div class=\"event_description bottom\">" +
						"  <a style=\"margin-right:10px\" href=\""+$(this).find("html").text()+"\">"+$(this).find("linkText").text()+"</a>"+
						"  <a href=\""+$(this).find("flash").text()+"\">Slideshow Version</a>"+
						"</div>";
			}
		}
		else if( orientation == 'portrait' ) {
			html += "<div class=\"title\">"+$(this).find("name").text()+"</div>";
			html += "<div class=\"portrait\"><img class=\"dropShadow\" width=\"250\" src=\""+$(this).find("image").text()+"\"/></div>";
			html += "<div class=\"event_description right\"><b>"+$(this).find("date").text()+"</b> - "+$(this).find("description").text()+"</div>";
			if( $(this).find("html").text() != "" ) {
				html += "<div class=\"event_description right\">" +
				        "  </br><a href=\""+$(this).find("html").text()+"\">"+$(this).find("linkText").text()+"</a>" +
				        "  </br></br><a href=\""+$(this).find("flash").text()+"\">Slideshow Version</a>" +
				        "</div>";
			}
		}
		html += "<div class=\"seperator\"></div>";
	});
	
	$(".content").append(html);
}

</script>

<body>
  <div class="banner"><img src="images/banner.gif"/></div>
  <div class="page">
    <div class="nav">
      <div class="menu left"><a href="index.html" onmouseover="highlight('home')" onmouseout="unhighlight('home')"><img id="home" src="images/home.jpg"/></a></div>
      <div class="menu"><a href="gallery.html" onmouseover="highlight('gallery')" onmouseout="unhighlight('gallery')"><img id="gallery" src="images/gallery.jpg"/></a></div>
      <div class="menu"><a href="events.html" onmouseover="highlight('events')" onmouseout="unhighlight('events')"><img id="events" src="images/events.jpg"/></a></div>
    </div>
    <div class="divider"></div>
    <div class="content events">
      <div class="headlines">Latest Events</div>      	
      <!--<div style="float:left; margin-left:100px;" class="event_text">Event Name</div>
      <div style="float: right; margin-right:350px" class="event_text">Date</div>
      <div class="portrait"><img src="images/pregnant.jpg" width="250"/></div>
      <div style="float:left" class="event_description right">Some descripton about the picture</div>
      <div class="seperator"></div> -->
    </div>
    <div class="divider"></div>
  </div>
</body>    
</html>